import Vue from 'vue'
import less from 'less'

import {
    loadModule
} from 'vue3-sfc-loader/dist/vue2-sfc-loader.js'

const options = {
    moduleCache: Object.assign(Object.create(null), { vue: Vue, less: less }),
    addStyle(textContent, url) {
        less.render(textContent, {}, function(error, output) {
            try {
                const style = Object.assign(document.createElement('style'), { textContent: output.css })
                const ref = document.head.getElementsByTagName('style')[0] || null
                document.head.insertBefore(style, ref)
            } catch (error) {
                console.log('less转换失败', error);
            }
        })
    }
}

const parseOptions = {
    async getFile(url) {
        const type = /.*\.js|.mjs$/.test(url)?'mjs':/.*?\.vue$/.test(url)?'.vue':/.*?\.css$/.test(url)?'.css':'.vue'
        const getContentData = asBinary => fetch(url).then(res => !res.ok?Promise.reject(res):asBinary?res.arrayBuffer():res.text())
        return {
            getContentData,
            type
        }
    },
    ...options
}

const realtimeLoadOptions = {
    async getFile(url) {
        const type = '.vue'
        const getContentData = asBinary => new Promise((resolve,reject) => {
            var card = sessionStorage.getItem(`card-${url}`)
            resolve(card)
        })
        return {
            getContentData,
            type
        }
    },
    ...options
}

const parseJSONOptions = {
    parseJson: true,
    ...parseOptions
}

function parseComponentsRealTime(fileName) {
    let parseJSONOptionsRealTime = {
        parseJson: true,
        ...realtimeLoadOptions
    }
    let res = loadModule(`${fileName}.vue`, parseJSONOptionsRealTime)
    return res
}

function loadComponents(item) {
    var parseComponentOptions = {
        parseComponent: JSON.parse(item.component),
        ...realtimeLoadOptions
    }
    var filePath = '/' + item.uid + '-' + item.fileName
    Vue.component('card-' + item.uid, ()=> loadModule(filePath, parseComponentOptions))
}
function initComponents() {
    var parseComponentOptions = {
        parseComponent: JSON.parse(item.component),
        ...realtimeLoadOptions
    }
    var filePath = '/' + item.uid + '-' + item.fileName
    Vue.component('card-' + item.uid, ()=> loadModule(filePath, parseComponentOptions))
}

function parseComponents(fileName) {
    return loadModule(`/static/${fileName}`, parseJSONOptions)
}

function runComponent(fileName) {
    var newOptions = {
        ...realtimeLoadOptions
    }
    Vue.component(`card-${fileName}`, () => loadModule(`${fileName}.vue`, newOptions))
}

function runComponentArray(dataArray = [],nameTime = '') {
    sessionStorage.clear()
    dataArray.forEach(element => {
        sessionStorage.setItem(`card-${element.uid}${nameTime}.vue`, element.file)
        Vue.component(`card-${element.uid}${nameTime}`, ()=> loadModule(`${element.uid}${nameTime}.vue`, {
            ...realtimeLoadOptions
        }))
    })
}

function nestComponents(name,url) {
    Vue.component(name, ()=> loadModule(url,{...parseOptions}))
}

export {
    nestComponents,
    loadComponents,
    parseComponents,
    runComponent,
    initComponents,
    parseComponentsRealTime,
    runComponentArray
}

